{include file="public/header" /}
<span class="layui-breadcrumb">
  <a href="javascript:;">轮播图</a>
  <a><cite>列表</cite></a>
</span>
<div class="layui-fluid">
    <div class="layui-card">
      <div class="layui-card-body">
        <div style="color:#FF5722">网站首页轮播图,前台展示顺序为创建时间升序排列</div>
        <button class="layui-btn layui-btn-normal layui-btn-sm" onclick="insert_edit('添加','tj')">添加</button>
   
        <div class="layui-form">
          <table class="layui-table" id="script_table">
            <thead>
              <tr>
                <th>图片</th>
                <th>alt</th>
                <th>创建时间</th>
                <th>状态</th>
                <th>操作</th>
              </tr> 
            </thead>
            <tbody>
              {volist name="data_list" id="data"}
               <tr>
                <td>
                  {eq name="$data.type" value="1"}
                  <img src="{$data.img}" style='width:150px;cursor:pointer;min-width:150px' onclick="show('{$data.img}')">
                  {else/}
                  <video loop="loop" muted="" autoplay="" style='width:150px;cursor:pointer;' onclick="show('{$data.img}')">
                    <source src="{$data.img}" type="video/mp4">
                  </video>
                  {/eq}
                </td>
                <td>{$data.alt}</td>
                <td>{$data.create_time}</td>
                <td>{eq name="$data.status" value="1"}正常{else/}已删除{/eq}</td>
                <td>
                  {eq name="$data.status" value="1"}
                   <button type="button" class="layui-btn layui-btn-danger layui-btn-xs" onclick="del({$data.id})">删除</button>
                   <button type="button" class="layui-btn layui-btn-xs" onclick="insert_edit('编辑',{$data.id},'{$data.alt}','{$data.img}','{$data.type}')">编辑</button>
                  {/eq}
                </td>
              </tr>
              {/volist}
              
            </tbody>
          </table>
        </div>

      </div>  
    </div>
</div>

{include file="/public/footer" /}

<script>
  /*图片视频放大*/
  function show(url){
      layer.open({
        type: 2,
        title: false,
        area: ['60%', '50%'],
        shade: 0.8,
        closeBtn: 0,
        fixed: false,
        shadeClose: true,
        content: url
      });
  } 

  function del(id){
    layer.confirm('你确定要删除吗', {
      btn: ['确定','取消'] //按钮
    }, function(){
      layer.load();
      $.post("{:url('Banner/del')}",{id:id},function(res){
          if(res.status=='0'){
              layer.closeAll('loading');
              layer.msg(res.msg);
          }
          if(res.status=='1'){
              layer.msg(
              res.msg,{icon: 1,time: 600},
              function(){
                layer.closeAll('loading');
                location.href=location.href;
              });
          }
      })
    });
  }

 /*添加 或 修改 找change.html*/
 function insert_edit(type,id,alt,img,type2){
    layer.open({
      type: 2,
      title:type,
      area: ['600px', '38%'],
      maxmin: true,
      content: 'change.html',
      btn: ['提交'],
      yes: function (index,layero) {
          do_insert_edit(index,layero,id);//执行 
      },
      success: function(layero, index){
          var body = layer.getChildFrame('body', index);//子页面dom
           /*获取子页面输入内容*/
          if(id!='tj'){
              body.find("input[name='alt']").val(alt);
              body.find("#show_img").attr('src',img);
              body.find("input[name='newname']").val(img);
              body.find("input[name='type']").val(type2);
          }  
      }
    }); 
 }
 
/*执行添加或修改*/
 function do_insert_edit(index,layero,id){
      layer.load();
      var body = layer.getChildFrame('body', index);//子页面dom
      /*获取子页面输入内容*/
      var alt=$.trim(body.find("input[name='alt']").val());
      var newname=$.trim(body.find("input[name='newname']").val());
      var type=$.trim(body.find("input[name='type']").val());
      if(alt==''){
          layer.closeAll('loading');
          layer.msg('请填写alt');
          return false;
      }
      if(newname==''){
          layer.closeAll('loading');
          layer.msg('请上传图片');
          return false;
      }
      
      if(id=='tj'){
        var url="{:url('Banner/change')}";
      }else{
        var url="{:url('Banner/change')}"+"?id="+id;
      }
      $.post(url,{alt:alt,newname:newname,type:type},function(res){
          if(res.status=='0'){
              layer.closeAll('loading');
              layer.msg(res.msg);
          }
          if(res.status=='1'){
              layer.msg(
              res.msg,{time: 1500 },
              function(){
                layer.closeAll();
                location.href=location.href;
              });
          }
      }) 
 }

</script>
